<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html class="no-js">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>沃店</title>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">
    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/app.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/assets/css/index.css">
    <!--必要样式-->
    <style type="text/css">
        body {
            background-color: #EFEFEF;
        }

        .phone-num {
            font-size: 20px;
            padding: 10px;
            margin-bottom: 1px;
            background-color: #fff;
        }

        .more {
            font-size: 16px;
            padding: 10px;
        }
    </style>
</head>

<body>
<header data-am-widget="header" class="am-header am-header-default am-header-fixed">
    <div class="am-header-left am-header-nav">
        <a href="#left-link" class="">
            <i class="am-header-icon am-icon-chevron-left"></i>
        </a>
    </div>
    <h1 class="am-header-title">
        <a href="#title-link" class="">靓号选择
        </a>
    </h1>
</header>
<div class="am-g" id="numlist">
    <div class="am-u-sm-12 phone-num" v-for="item in items" onclick="bindPhone()">
        <input type="hidden" :value="item.id" :id="item.phoneNumber">
        {{item.phoneNumber}}
    </div>
    <div class="am-u-sm-12 more" align="center" onclick="morePhone()" style="margin-bottom: 49px;">
        显示更多号码
    </div>
</div>

<div align="center" data-am-widget="navbar" class="am-navbar am-cf am-navbar-default whiteBg">
    <div class="clearpadding am-u-sm-8" style="float: left;">
        选中号码：<span id="select_phone"></span>
    </div>
    <div class="am-u-sm-4" style="background-color: #ff6a06;color: #fff;" onclick="sub()">
        确认选择
    </div>
</div>

<!--[if (gte IE 9)|!(IE)]><!-->
<script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/amazeui.min.js"></script>
<script src="${pageContext.request.contextPath}/assets/js/vue.js"></script>
<script src="${pageContext.request.contextPath}/layer/layer.js"></script>
<script type="text/javascript">
    var nums = new Vue({
        el: "#numlist",
        data: {
            items: []
        }
    });
    var pageNum = 1;
    var total = 0;
    var id;
    $.ajax({
        type: "get",
        url: '${pageContext.request.contextPath}/clientPhone/findPhone',
        dataType: 'json',
        success: function (data) {
            if (data.success == true && data.code == 200) {
                nums.items = data.obj.listDate;
                pageNum = data.obj.pageModel.cpage + 1;
                total = data.obj.pageModel.totalnum;
            }
        }
    });

    function bindPhone() {
        $(".phone-num").click(function () {
            $("#select_phone").text($(this).text());
            id = $('input[id=' + $(this).text() + ']').val();
        });
    }
    function morePhone() {
        if (pageNum > total) {
            $(".more").text("没有更多号码了");
            return;
        }
        $.ajax({
            type: "get",
            data: {
                pageNum: pageNum
            },
            url: '${pageContext.request.contextPath}/clientPhone/findPhone',
            dataType: 'json',
            success: function (data) {
                if (data.success == true && data.code == 200) {
                    pageNum = data.obj.pageModel.cpage + 1;
                    total = data.obj.pageModel.totalnum;
                    $.each(data.obj.listDate, function (i, n) {
                        nums.items.push(n);
                    });

                }
            }
        });
    }
    function sub() {
        if (null!=id){
            window.location.href = "${pageContext.request.contextPath}/clientPhone/selectPhone?phoneId=" + id;
        }else {
            layer.msg('请选择一个号码！');
        }
    }
</script>
</body>

</html>
